<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>x-admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/xadmin/lib/layui/css/layui.css" media="all">
    <script>
        /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
    </script>
    <style type="text/css">
        .hide{display:none}
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-card">
    <div class="layui-card-body">
        <!--主体内容 start-->
        <div class="layui-row">
            <div class="layui-col-md1">
                <button class="layui-btn layui-btn" onclick="add()">新增</button>
            </div>
        </div>
        <div style="overflow-y: scroll;height: 700px;">
            <table class="layui-table layui-form" id="test-tree-table" ></table>
        </div>
        <!--主体内容 end-->
    </div>
</div>

<script src="/static/xadmin/lib/layui/jquery-3.2.1.min.js"></script>
<script src="/static/xadmin/lib/layui/layui.js"></script>
<!--<script src="./Public/layuiadmin/layui_ext/dtree/dtree.js"></script>-->
<script>
    layui.config({
        base: '/static/xadmin/' //静态资源所在路径
    });
    layui.config({
        base: '/static/lay_table/js/'
    });
    FORM='';
    layui.use(['treetable','form'],function(){
        var form=layui.form;
        FORM=form;
        $.post('{:url("admin/goodscate/index")}',{},function(data){
            if(data.code==1){
                console.log(data);
                var data=data.data;
                var o = layui.$,treetable = layui.treetable;
                var form = layui.form,layer = layui.layer;
                treetable.render({
                    elem: '#test-tree-table',
                    data: data,
                    field: 'title',
                    is_checkbox: true,
                    checked:[1,2,3,4],
                    /*icon_val: {
                        open: "&#xe619;",
                        close: "&#xe61a;"
                    },
                    space: 4,*/
                    cols: [
                        {
                            field: 'title',
                            title: '分类名称',
                            width: '50%',
                            template: function(item){
                                if(item.level == 1){
                                    return '<span style="color:red;">'+item.title+'</span>';
                                }
                                if(item.level == 2){
                                    return '<span style="color:green;">'+item.title+'</span>';
                                }
                                return item.title;
                            }
                        },
                        {
                            field: 'actions',
                            title: '操作',
                            width: '50%',
                            template: function(item){
                                var tem = [];
                                tem.push('<button lay-filter="edit" class="layui-btn" >编辑</button>');
                                if(item.pid == 0){
                                    tem.push('<button class="add-child layui-btn layui-btn-danger"  lay-filter="delete">删除</button>');
                                }
                                if(item.pid > 0){
                                    tem.push('<button class="set-attr layui-btn layui-btn-danger"  lay-filter="delete">删除</button>');
                                }
                                return tem.join(' <font>&nbsp;</font> ')
                            },
                        },
                    ]
                });

                treetable.on('treetable(edit)',function(data){
                    var id=data.item.id;
                    var url='{:url("admin/goodscate/edit")}'+'?id='+id;
                   layer.open({
                        type: 2,
                        skin: 'layui-layer-rim',
                        area: ['60%', '60%'],
                        content: url,
                       end:function () {
                           location.reload();
                       }
                    });

                });

                treetable.on('treetable(delete)',function(data){
                    var id=data.item.id;
                    layer.confirm('你确定要删除么？', {
                        btn: ['确定', '取消'] //可以无限个按钮
                    }, function(index, layero){
                        //按钮【按钮一】的回调
                        $.post('{:url("admin/goodscate/del")}',{'id':id},function(data){
                            if(data.code==1){
                                layer.msg(data.msg,{icon:1});
                                setTimeout(function () {
                                    location.reload();
                                },1500);
                            }else{
                                layer.msg(data.msg,{icon:2});
                            }
                        });

                    }, function(index){
                        //按钮【按钮二】的回调
                    });

                });

                o('.up-all').click(function(){
                    treetable.all('up');
                });

                o('.down-all').click(function(){
                    treetable.all('down');
                });

                o('.get-checked').click(function(){
                    console.dir(treetable.all('checked'));
                });

                form.on('switch(status)',function(data){
                    layer.msg('监听状态操作');
                    console.dir(data);

                })

            }
        })
//              var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
    })
    
    function add() {
        var url='{:url("admin/goodscate/add")}';
        layer.open({
            type: 2,
            title: '分类的添加',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url, //iframe的url
            end:function () {
                location.reload()
            }
        });

    }


</script>
</body>
</html>
